<template>
  <a-drawer v-model:open="open"
           width="50%"
           :footer="null"
           title="编辑工作经验"
           :keyboard="false"
           :mask-closable="false"
            @close="handleClose"
           @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="vertical"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '100%' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="8">
          <a-form-item
            
            required
            >
            <template #label>
              <span class="fw">上船港口</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.systemName"  maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item
            
            required
            >
            <template #label>
              <span class="fw">下船港口</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.systemName"  maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item
            
            required
            >
            <template #label>
              <span class="fw">备注</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.systemName"  maxlength="100" placeholder="请填写"/>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <a-form-item  required>
            <template #label>
              <span class="fw">上船当天出勤（天）</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.systemName"  maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item   required>
            <template #label>
              <span class="fw">下船当天出勤（天）</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.systemName"  maxlength="100" placeholder="请填写"/>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <a-form-item  required>
            <template #label>
              <span class="fw">任职说明</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.systemName"  maxlength="100" placeholder="请填写"/>
          </a-form-item>
          <a-form-item  required>
            <template #label>
              <span class="fw">下船原因</span>
            </template>
            <a-input class="w100" v-model:value.trim="formState.systemName"  maxlength="100" placeholder="请填写"/>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="24">
          <a-form-item >
            <template #label>
              <div class="flex flex-wrap" >
                <span class="fw">附件</span>
              </div>
            </template>
            <cc-upload v-model="fileList"></cc-upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>
<script setup>
const open = ref(false);
const formRef = ref({})
const roleArr = ref([])
const emits = defineEmits(["success"])
const formState = ref({
  id:"",
  type:1,
  account:"",
  username:""
});
const tagsData = reactive(['月份回船', '待派', '考证中','家中有事', '暂不上船', '见习完成','考核不合格', '不续聘', '已上船']);
const selectTags = reactive([false, true, false, false, false, false, false, false]);
const handleChange = (tag, checked) => {
  console.log(tag, checked);
};

// 验证规则
const rules = {
  account: [ {required: true, message: '请输入账号', trigger: 'blur'}],
  username: [ {required: true, message: '请输入昵称', trigger: 'blur'}],
};

const onSubmit = async () => {
  try {
    await formRef.value.validate()
    if(roleArr.value && roleArr.value.length > 0){
      formState.value.roleIds = roleArr.value.join(",")
    }
    if(formState.value.id){
      await useUpdateUserApi(formState.value)
    }else{
      await useSaveSystemUserApi(formState.value)
    }
    useMessage().success("操作成功")
    handleClose()
    emits("success")
  } catch (e) {
    useMessage().error(e.msg)
  }
};

const handleOpen = async (record) => {
  open.value = true
}

const handleClose = () => {
  roleArr.value = []
  formState.value = {
    id:"",
    account:"",
    password:"123456",
    username:"",
    avatar:"",
    phone:"",
    email:"",
    status:1,
    admin:'admin',
  }
  open.value = false
}

defineExpose({
  handleOpen
})

</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>